let path = require('path')
let { CleanWebpackPlugin } = require('clean-webpack-plugin')
let html = require('html-webpack-plugin')
let webpack = require('webpack')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
// MiniCssExtractPlugin 这个插件可以把css单独拎成一个css文件

// loader 是专门吧其它类型的文件转化成 webpack能认识的类型
// plugins

module.exports = {
  mode: 'production',
  entry: {
    myindex: './src/index.js',
    myother: './src/other.js'
  },
  output: {
    filename: '[name].[fullhash:6].js',
    path: path.resolve(__dirname, '../mydist2'),
    assetModuleFilename: 'img/[name][ext][query]'
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['**/*', '!qq.html']
    }),
    new html({
      template: './public/index.html',//  指定用来渲染的html模板
      filename: 'index.html',// 生成的html文件的名字
      title123: "珠峰",
      qqq: '<link href="https://baidu.com/1.css"/>',
      minify: false,
      chunks: ['myindex']
    }),
    new html({
      template: './public/other.html',//  指定用来渲染的html模板
      filename: 'other.html',// 生成的html文件的名字
      title123: "珠峰",
      qqq: '<link href="https://baidu.com/1.css"/>',
      minify: false,
      chunks: ['myother']
    }),
    new webpack.DefinePlugin({
      VERSION: JSON.stringify('5fa3b9'),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: '1+1',
      'typeof window': JSON.stringify('object'),
    }),
    new MiniCssExtractPlugin({
      filename: 'css/index.css'
    })
  ],
  module: {
    // loader的加载顺序是从右项左  从下往上
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', "postcss-loader"],
        exclude: /node_modules/
      },
      {
        test: /\.(svg|png|jpg|gif|mp3)$/,

        type: 'asset/resource'
      }
    ]
  }
}